<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="任务中心" :visible.sync="dialogVisible" @close="resetForm()" width="700px">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-table :data="tableData" class="com_table" height="400px">
                <el-table-column prop="file_name" label="文件名称" min-width="180">
                </el-table-column>
                <el-table-column prop="task_status" label="文件状态" width="130">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter" v-if="scope.row.task_status==0">
                            <div class="tm_y gray_y"></div>
                            <div class="tm_t gray_t">等待爬取</div>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.task_status==1">
                            <div class="tm_y yellow_y"></div>
                            <div class="tm_t yellow_t">正在爬取</div>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.task_status==2">
                            <div class="tm_y green_y"></div>
                            <div class="tm_t green_t">爬取成功</div>
                        </div>
                        <!-- <div class="flexbox flexcenter" v-if="scope.row.task_status==-1">
                            <div class="tm_y red_y"></div>
                            <div class="tm_t red_t">处理失败</div>
                        </div> -->
                    </template>
                </el-table-column>
                <el-table-column prop="have_sheet" label="是否已导出飞书" width="150">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <template v-if="scope.row.have_sheet==0">等待处理...</template>
                            <el-link type="primary" :href="scope.row.feishu_sheet" target="_blank" :underline="false" v-else>飞书表格链接</el-link>
                            <el-popover placement="top" trigger="hover" width="300">
                                <div class="tips_content">
                                    <div class="font_14 color_01">已选条件</div>
                                    <div class="option_content" v-for="(item,index) in scope.row.field_list" :key="index">{{item}}</div>
                                </div>
                                <svg slot="reference" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:5px;cursor:pointer;">
                                    <circle cx="10" cy="10" r="8" fill="#CFD4DD" />
                                    <path d="M7.39994 8.8544V8.9544H7.49994H8.74448H8.84448V8.8544C8.84448 8.40304 8.9303 8.06505 9.09801 7.83666L9.09808 7.83671L9.10032 7.83337C9.28302 7.56236 9.58377 7.42692 10.0436 7.42692C10.3967 7.42692 10.6621 7.52052 10.8451 7.70414C11.0208 7.89135 11.1226 8.15083 11.1226 8.49176C11.1226 8.7406 11.0343 8.98223 10.851 9.20803L10.7251 9.3559C10.3713 9.67381 10.0866 9.94944 9.87165 10.1838C9.65771 10.4171 9.50776 10.6151 9.43002 10.7769C9.2679 11.0923 9.20125 11.4719 9.20125 11.8984V12.0522V12.1522H9.30125H10.5567H10.6567V12.0522V11.8984C10.6567 11.6496 10.7079 11.4341 10.81 11.2286C10.9022 11.043 11.0355 10.8671 11.2214 10.7112L11.2214 10.7113L11.2232 10.7097C11.7459 10.2493 12.0675 9.9484 12.1706 9.83314L12.1709 9.8334L12.1762 9.82623C12.4532 9.4545 12.5999 8.98201 12.5999 8.41484C12.5999 7.72088 12.3728 7.16437 11.9115 6.75784C11.452 6.34177 10.8473 6.15 10.12 6.15C9.29227 6.15 8.63188 6.38707 8.13985 6.8706C7.63526 7.35566 7.39994 8.02186 7.39994 8.8544ZM10.584 13.1633L10.584 13.1632L10.5815 13.1609C10.3974 12.9879 10.1647 12.903 9.90169 12.903C9.63732 12.903 9.41597 12.9888 9.23278 13.1609C9.04607 13.3363 8.96107 13.5619 8.96107 13.8271C8.96107 14.0924 9.04607 14.318 9.23278 14.4934C9.41346 14.6632 9.63394 14.7623 9.90169 14.7623C10.166 14.7623 10.3874 14.6765 10.5706 14.5044C10.7559 14.3303 10.8532 14.0945 10.8532 13.8271C10.8532 13.5588 10.7553 13.3357 10.584 13.1633Z" fill="white" stroke="white" stroke-width="0.2" />
                                </svg>
                            </el-popover>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间" width="180">
                </el-table-column>
            </el-table>
        </div>
        <el-pagination style="margin-top:16px" background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :total="total">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="resetForm()" class="el-button-width" size="small">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            tableData: [],
            queryInfo: {
                page: 1,
                limit: 20,
            },
            total: 0,
        };
    },

    created() {},
    methods: {
        getData() {
            this.dialogVisible = true;
            this.getTaskList();
        },

        //获取列表
        async getTaskList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/fxdata/Fxselect/taskList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.total = res.data.count;
                this.tableData = res.data.list;
            }
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.queryInfo.page = 1;
            this.total = 0;
        },

        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getTaskList();
        },
    },
};
</script>
<style scoped>
.option_content{
    line-height: 20px;
    margin-top: 5px;
}
.tm_y {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.tm_t {
    font-size: 14px;
    margin-left: 12px;
}
.gray_y {
    background: #b4b7bd;
}
.yellow_y {
    background: #fabc42;
}
.green_y {
    background: #00c271;
}
.red_y {
    background: #fe6262;
}
.gray_t {
    color: #b4b7bd;
}
.yellow_t {
    color: #fabc42;
}
.green_t {
    color: #00c271;
}
.red_t {
    color: #fe6262;
}
</style>

